<!-- 模板 -->
<template>
  <div class="btn-root">
    <div>这是从home拿到的属性绑定数据：{{ txt }}</div>
    <button @mousedown="operate($event, '+')" @mouseup="stop($event, '+')">
      加1
    </button>
    <button @mousedown="operate($event, '-')" @mouseup="stop($event, '-')">
      减1
    </button>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      id: 0,
      startTime: 0,
      endTime: 0,
      id1: 0
    }
  },
  mounted() {
    //只要松开鼠标时就清空定时器
    let _this = this
    document.addEventListener('mouseup', function() {
      if (_this.id) {
        clearInterval(_this.id)
      }
    })
  },
  props: ['txt'],
  methods: {
    //鼠标松开
    stop($event, opt) {
      console.log($event)
      //clearInterval(this.id)
      //获得松开时间戳
      this.endTime = +new Date()
      let time = this.endTime - this.startTime
      console.log(time)
      if (time < 750) {
        clearInterval(this.id1)
        this.tap(opt)
      }
    },

    //鼠标按下时执行的操作
    operate($event, opt) {
      //点击时的时间戳
      this.startTime = +new Date()
      console.log(($event.target.innerHTML = '+1'))
      let _this = this
      clearInterval(this.id1)
      //在300ms后开始执行长按事件
      this.id1 = setTimeout(function() {
        _this.longTap(opt)
      }, 750)
    },

    //单击事件
    tap(opt) {
      let num = this.txt
      if (opt === '+') {
        num++
      } else {
        num--
      }
      //触发在'父级组件'中 '自定义事件(myEvt)'，并传递参数
      this.$emit('myEvt', num)
    },

    // 长按事件
    longTap(opt) {
      if (this.id) {
        clearInterval(this.id)
      }
      let _this = this
      this.id = setInterval(function() {
        //此处的this===window,this!==vue
        let num = _this.txt
        if (opt === '+') {
          num++
        } else {
          num--
        }
        //触发在'父级组件'中 '自定义事件(myEvt)'，并传递参数
        _this.$emit('myEvt', num)
      }, 100)
    }
  }
}
/*
父级组件传值给子组件使用props绑定，
子组件传值给父组件使用自定义事件绑定
*/
</script>

<style lang="less" scoped></style>
